<template>
	<view class="content">
		<view class="list flex flex-col justify-start items-center">
			<view class="banner w100">

				<swiper class="topView" indicator-dots="true" autoplay="true" :interval="interval" duration="400">
					<swiper-item v-for="(item, index) in list" :key="index" @click="gomenu(item.url)">

						<view class="topView">
							<image class="topView" :src="$util.img(item.image) " mode="widthFix" lazy-load="true"
								:data-index="index">

							</image>
						</view>


					</swiper-item>


				</swiper>

			</view>


			<view class="tab flex flex-row justify-between items-center ">
				<view class="f_28 c_9d tabitem flex items-center justify-center" @click="tabclick(index)"
					:class="active==index?'active_'+index:''" v-for="(item,index) in tablist" :key="index">
					{{item}}
				</view>
			</view>


			<view class="grb flex flex-col w100 justify-center items-center" v-if="active==0">
				<view class="flex flex-col justify-start w100  w100t">
					<view class="flex flex-row justify-between items-center w100 ">
						<view class="flex flex-row items-center justify-start w300">
							<text class="f_32 c_6">姓名</text>
							<text class="orange f_32">*</text>
						</view>
						<view class="mright">
							<input type="text" value="" v-model="name" placeholder="请填写姓名" />
						</view>
				
					</view>
					<view class="flex flex-row justify-between items-center w100 mt_40 ">
						<view class="flex flex-row items-center justify-start w300">
							<text class="f_32 c_6">手机号</text>
							<text class="orange f_32">*</text>
						</view>
						<view class="mright">
							<input type="text" value="" v-model="phone1" placeholder="请填写手机号" />
						</view>
				
					</view>
					<view class="flex flex-row justify-between items-center w100 mt_40">
						<view class="flex flex-row items-center justify-start w300">
							<text class="f_32 c_6">邮箱</text>
							<text class="orange f_32">*</text>
						</view>
						<view class="mright">
							<input type="text" value="" v-model="email" placeholder="请填写邮箱" />
						</view>
				
					</view>
				
					<view class="flex flex-row justify-between items-center w100 mt_40">
						<view class="flex flex-row items-center justify-start w300">
							<text class="f_32 c_6">地址</text>
							<text class="orange f_32">*</text>
						</view>
						<view class="mright">
							<input type="text" value="" v-model="address" placeholder="请填写地址" />
						</view>
				
					</view>
				
				
					<view class="flex flex-col justify-between items-start w100  mt_40">
						<view class="flex flex-row items-center justify-start w200">
							<text class="f_32 c_6">特长</text>
							<text class="orange f_32">*</text>
						</view>
						<textarea value="" placeholder="请填写您的特长" v-model="desc1" />
				
					</view>
					<view class="flex flex-col justify-between items-start w100  bgwhite mt_40">
						<view class="flex flex-col items-center justify-center items_tu" @click="upload1"
							v-if="d_img1==''">
							<i class="iconfont icon-jiahao c_80 f_32"></i>
							<text class="f_20 c_80 mt10">点击上传头像</text>
						</view>
						<view class="" v-else @click="upload1">
							<image :src="d_img1" mode="" style="width: 288rpx;height: 162rpx;border-radius: 10rpx;">
							</image>
						</view>
				
					</view>
				</view>
				
				<view class="fixedbtn flex flex-row justify-between  u-fixed-bottom">
				
					<view class="btn background_blue" :class="{'mb_20': !isIPhoneX}" @click="sub_draw1">
						申请</view>
				
				
				</view>
				

			</view>
			<view class="grb flex flex-col w100 justify-center items-center" v-else-if="active==1">
				<view class="flex flex-col justify-start w100  w100t">
					<!-- <view class="flex flex-row justify-between items-center w100">
						<view class="flex flex-row items-center justify-start w200">
							<text class="f_32 c_6">志愿者选择</text>
							<text class="orange f_32">*</text>
						</view>
						
					<view class="mright flex flex-row justify-between" style="width: 450rpx;">
						<picker :value="zyzvalue" :range="arr"  range-key="titile" @change="chooseHobby">
							<view class="mright flex flex-row justify-between" style="width: 450rpx;">
								<text>{{zyzvalue?arr[zyzvalue].titile:'请选择志愿者'}}</text>
						
							<u-icon name="arrow-right"></u-icon>
							</view>
						</picker>
					
						
					</view>
						
					</view> -->
					<view class="flex flex-row justify-between items-center w100 ">
						<view class="flex flex-row items-center justify-start w300">
							<text class="f_32 c_6">预约人电话</text>
							<text class="orange f_32">*</text>
						</view>
						<view class="mright">
							<input type="text" value="" v-model="phone" placeholder="请填写手机号" />
						</view>

					</view>
					<view class="flex flex-col justify-between items-start w100 mt_40">
						<view class="flex flex-row items-start justify-start w100">
							<text class="f_32 c_6">选择需求</text>
							<text class="orange f_32">*</text>
						</view>

						<view class="mright flex flex-row justify-between items-center mt10" style="width: 100%;">
							<view class="taglist flex justify-center items-center" v-for="(item,index) in xq"
								:key="index" :class="xq_list==index?'active':''" @click="xqindex(index)">
								{{item.value}}
							</view>


						</view>

					</view>
					
					
					<view class="flex flex-row justify-between items-center w100 mt_40">
						<view class="flex flex-row items-center justify-start w300">
							<text class="f_32 c_6">选择时间</text>
							<text class="orange f_32">*</text>
						</view>
						<view class="mright flex flex-row justify-between" @click="opentime(0)">
							<text style="margin-right: 5rpx;">{{startTime?startTime:'请选择时间'}} </text>
							<u-icon name="arrow-right"></u-icon>
						</view>

					</view>
					<view class="flex flex-col justify-between items-start w100  mt_40">
						<view class="flex flex-row items-center justify-start w200">
							<text class="f_32 c_6">需求描述</text>
							<text class="orange f_32">*</text>
						</view>
						<textarea value="" placeholder="请详细描述您的需求信息" v-model="desc" />

					</view>
					<view class="flex flex-col justify-between items-start w100  bgwhite mt_40">
						<view class="flex flex-col items-center justify-center items_tu" @click="upload"
							v-if="d_img==''">
							<i class="iconfont icon-jiahao c_80 f_32"></i>
							<text class="f_20 c_80 mt10">点击添加附件照片</text>
						</view>
						<view class="" v-else @click="upload">
							<image :src="d_img" mode="" style="width: 288rpx;height: 162rpx;border-radius: 10rpx;">
							</image>
						</view>

					</view>
				</view>
				<lingfeng-timepicker ref="timePop" type="datetime-all" :defaultData="dateTimeAllRangeDefault"
					:minDate="minDate" :maxDate="maxDate" @change="timeChange"></lingfeng-timepicker>

				<view class="fixedbtn flex flex-row justify-between  u-fixed-bottom">

					<view class="btn background_blue" :class="{'mb_20': !isIPhoneX}" @click="sub_draw">
						提交</view>


				</view>
			</view>
			<view class="grb flex flex-col w100 " v-else>
			<!-- 	<waterfallsFlow :list="img_list" v-on:wapper-lick="wapperlick" v-on:image-click="imageClick" />
				 -->
				 <waterfall-flow-layout :data="img_list" :column="2" :margin="20" img-key="image" :item-style="setItemStyle" @click="handleClick">
				            <!-- 作用域插槽 -->
				          <!--  <template v-slot="{data}">
				                <view class="content">
				                    <view class="title">{{data.title}}</view>
				                    <view class="price">￥{{data.price}}</view>
				                </view>
				            </template> -->
				</waterfall-flow-layout>
				
				
				
				
				
				
				<view class="" v-if="img_list.length==0">
					<u-empty
					        mode="favor"
							text='暂无数据'
					       
					>
					</u-empty>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getFormatDate,
		getFormatDatenow
	} from "@/common/js/util.js";

import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
	import http from 'common/js/http.js';

	export default {
		  components: { waterfallsFlow},
		mixins: [http],
		data() {

			const [year, month, date] = getFormatDate().split("-");
			const [year1, month2, date2, hour2, minute2, second2] = getFormatDatenow().split("-");
			return {
				 leftH: 0,
				  rightH: 0,
				  leftList: [], 
				  rightList: [],
				img_list:[],
				name: '',
				phone1: '',
				email: '',
				address: '',
				desc1: '',
				d_img1: '',
				phone: '',
				d_img: '',
				tempFilePath: '',
				desc: '',
				dateDefault: {
					year: year,
					month: year + '-' + month,
					startTime: year + '-' + month + '-' + date
				},
				dateTimeAllRangeDefault: {
					startTime: getFormatDatenow(),
					//	endTime:'2023-03-20 18:00:00',
				},
				minDate: {
					year: year1,
					month: month2,
					date: date2,
					hour: hour2,
					minute: minute2,
					second: second2
				},
				maxDate: {
					year: 2026,
					month: 1,
					date: 1,
					hour: 0,
					minute: 0,
					second: 0
				},
				type: 0,
				startTime: '',
				arr: [],
				xq_list: 'a',
				xq: [
				],
				tablist: [
					'志愿者注册',
					'志愿者点单',
					'活动剪影',
				],
				zyzvalue: '',
				active: 0,
				article: [

				],
				interval: 2000,
				list: [{
						poster: '../../static/image/banner@2x.png',

					},


					{
						poster: '../../static/image/banner@2x.png',

					},
					{
						poster: '../../static/image/banner@2x.png',

					},

				],
				menu: [{
						poster: '../../static/image/cunwugongkaiicon@2x.png',
						text: '村务公开'

					},


					{
						poster: '../../static/image/zhengminhudongicon@2x.png',
						text: '政民互动'
					},
					{
						poster: '../../static/image/bianminfuwuicon@2x.png',

						text: '便民服务'
					},
					{
						poster: '../../static/image/zhengcezixunicon@2x.png',

						text: '政策咨询'
					},
					{
						poster: '../../static/image/yishixieshangicon@2x.png',

						text: '议事协商'
					},
					{
						poster: '../../static/image/zhiyuanfuwuicon@2x.png',

						text: '志愿服务'
					}
				],
				keywords: '',
				city: '',
				rangeArr: [{
					text: '建湖县',
					value: 0

				}]
			}
		},
		onLoad() {
			this.getbanner()
		//	this.getlist()
			this.getimglist()
			this.getxq()
		},
		onShow() {
			this.getdat()
		},
		methods: {
			// 获取需求
			getxq(){
				this.sendRequest({
					url: 'volunteer/cate',
				
					success: res => {
					
						if (res.code == 1) {
							 const arr = Object.values(res.data).map(value => {
							     return {value, show: false}
							 });
							this.xq =arr
							
						
								this.$forceUpdate()
						}
					},
					fail: res => {
						
						setTimeout(e => {
							this.$util.showToast({
								title: res.msg
							})
						}, 200)
				
					}
				})
			},
			getimglist(){
				this.sendRequest({
					url: '/volunteer/activitylist',
					data: {town_id:1},
					success: res => {
					
						if (res.code == 1) {
							this.img_list = res.data
							
							this.img_list .map((item, index) => {
							            index % 2 ? this.rightList.push(this.$util.img(item.image)) : this.leftList.push(this.$util.img(item.image))
							        })
							 
								this.$forceUpdate()
						}
					},
					fail: res => {
						
						setTimeout(e => {
							this.$util.showToast({
								title: res.msg
							})
						}, 200)
				
					}
				})
			},
			loadImg: function (e) {
			    let windowWidth = 750;//当前屏幕宽度  
			    let imgWidth = windowWidth * 0.48;//大约图片的宽度
			    let imgRealWidth = e.detail.width;//原始图片的宽 
			    let imgRealHeight = e.detail.height;//原始图片的高 
			    let scale = imgWidth / imgRealWidth;//比例计算
			    let fillHeight = imgRealHeight * scale;//最后图片的高度
			      
			    if (this.leftH <= this.rightH) {//左边高度小于右边
			      this.leftList.push({"src": e.currentTarget.dataset.src, "fillHeight": fillHeight});
			      this.leftH += fillHeight;
			    } else {
			      this.rightList.push({ "src": e.currentTarget.dataset.src, "fillHeight": fillHeight });
			      this.rightH += fillHeight;   
			    }  
			  },
			sub_draw1(){
				
				if(this.name==''){
					this.$util.showToast({
						title:'请填写姓名'
					})
					return 
				}
				if(this.phone1==''){
					this.$util.showToast({
						title:'请填写手机号'
					})
					return 
				}
				if(this.email==''){
					this.$util.showToast({
						title:'请填写邮箱地址'
					})
					return 
				}
				if(this.address==''){
					this.$util.showToast({
						title:'请填写地址'
					})
					return 
				}
				if(this.desc1==''){
					this.$util.showToast({
						title:'请填写特长'
					})
					return 
				}
				if(this.d_img1==''){
					this.$util.showToast({
						title:'请上传头像'
					})
					return 
				}
			
				
				let data = {
					town_id:1,
					titile:this.name,
					image:this.d_img1,
					mobile:this.phone1,
					email:this.email,
					description:this.desc1,
					address:this.address
				}
				uni.showLoading()
				this.sendRequest({
					url: 'volunteer/add',
					data: data,
					success: res => {
						uni.hideLoading()
						if (res.code == 1) {
											
								this.$util.showToast({
									title: '提交成功!'
								})
								
							
							setTimeout(e => {
								
								uni.navigateBack()
							}, 1500)
						
						}else{
							this.$util.showToast({
								title: res.msg
							})
						
						}
					},
					fail: res => {
						uni.hideLoading()
						setTimeout(e => {
							this.$util.showToast({
								title: res.msg
							})
						}, 1000)
				
					}
				})
				
			},
			//点单提交
			sub_draw() {

				if (this.phone == '') {
					this.$util.showToast({
						title: '请填写手机号'
					})
					return
				}
				if (this.xq_list == 'a') {
					this.$util.showToast({
						title: '请选择需求'
					})
					return
				}
				if (this.startTime == '') {
					this.$util.showToast({
						title: '请选择时间'
					})
					return
				}
				if (this.description == '') {
					this.$util.showToast({
						title: '请填写需求描述'
					})
					return
				}
				uni.showLoading({
					title:'提交中'
				})
				let data = {
					town_id: 1,
					titile: this.xq[this.xq_list].value,
					image: this.d_img,
					mobile: this.phone,
					time: this.startTime,
					description: this.desc
				}
				this.sendRequest({
					url: 'volunteer/addapply',
					data: data,
					success: res => {
						uni.hideLoading()
						if (res.code == 1) {
					
								this.$util.showToast({
									title: '提交成功!'
								})
								
							
							setTimeout(e => {
								
								uni.navigateBack()
							}, 1500)

						}else{
							this.$util.showToast({
								title: res.msg
							})
						
						}
					},
					fail: res => {
						uni.hideLoading()
						setTimeout(e => {
							this.$util.showToast({
								title: res.msg
							})
							
						}, 1000)

					}
				})
			},
			xqindex(e) {
				this.xq.map((item, index) => {
					item.show = false
				})
				this.xq[e].show = true
				this.xq_list = e
			},
			upload1(){
				// 选取本地图片
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
				
						this.tempFilePath = res.tempFilePaths[0];
						console.log(res)
						uni.uploadFile({
							url: 'https://cun.polarislaser.cn/api/volunteer/upload',
				
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								'content-type': 'multipart/form-data'
							},
							success: e => {
								console.log(e)
								this.d_img1 = JSON.parse(e.data).data.fullurl
								//	that.tailorPath = that.$util.img(res.data)
							},
							fail: function(err) {
								console.log('err', err)
							},
							complete: function(e) {
				
								console.log(e)
				
							}
						})
					}
				});
			},
			upload() {
				// 选取本地图片
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {

						this.tempFilePath = res.tempFilePaths[0];
						console.log(res)
						uni.uploadFile({
							url: 'https://cun.polarislaser.cn/api/volunteer/upload',

							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								'content-type': 'multipart/form-data'
							},
							success: e => {
								console.log(e)
								this.d_img = JSON.parse(e.data).data.fullurl
								//	that.tailorPath = that.$util.img(res.data)
							},
							fail: function(err) {
								console.log('err', err)
							},
							complete: function(e) {

								console.log(e)

							}
						})
					}
				});
			},

			getdat(val) {
				let num = 0
				if (val) {
					val = String(val).replace(/-/g, '/');
				}
				let date = isNaN(Date.parse(val)) ? new Date(new Date().getTime() + num * 8.64e7) : new Date(new Date(val)
					.getTime() +
					num * 8.64e7);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				let hours = date.getHours();
				let minutes = date.getMinutes();
				let seconds = date.getSeconds();
				month = month < 10 ? "0" + month : month;
				day = day < 10 ? "0" + day : day;
				hours = hours < 10 ? "0" + hours : hours;
				minutes = minutes < 10 ? "0" + minutes : minutes;
				seconds = seconds < 10 ? "0" + seconds : seconds;
				this.minDate = {
					year: year,
					month: month,
					date: day,
					hour: hours,
					minute: minutes,
					second: seconds
				}
				console.log(day)
				//return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
			},
			opentime(e) {
				this.type = e
				this.$refs.timePop.show();
			},
			timeChange(val) {
				console.log(val)
				if (this.type == 0) {
					this.startTime = val
				} else {
					this.endTime = val
				}
				//this.datevak = val
			},
			getbanner() {
				this.sendRequest({
					url: 'cun/block',
					data: {
						town_id: 1
					},
					success: res => {
						console.log(res)
						if (res.code > 0) {

							this.list = res.data
						}
					}
				})
			},
			// gettab(){
			// 	this.sendRequest({
			// 		url: 'cun/index',
			// 		data: {
			// 			pid: 2
			// 		},
			// 		success: res => {
			// 			console.log(res)
			// 			if (res.code > 0) {

			// 				this.tablist = res.data
			// 				this.active = 0
			// 				this.getlist()
			// 			}
			// 		}
			// 	})
			// },
			tabclick(e) {
				this.active = e
				this.getdat()
			},

			getlist() {
				this.sendRequest({
					url: 'volunteer/list',
					data: {
						town_id: 1


					},
					success: res => {
						console.log(res)
						if (res.code > 0) {

							this.article = res.data
							this.arr = res.data

						}
					}
				})
			},
			bindPickerChange(e) {
				console.log(e.detail.value)
				this.city = this.rangeArr[e.detail.value].text

			}
		}
	}
</script>

<style lang="scss">
	.waterfall{
	  .container{
	      display: flex;
	      justify-content: space-between;
	      flex-wrap: wrap;
	      padding: 5px;
	  }
	  .left{
	      width: 48%;
	  }
	  .right{
	      width: 48%;
	  }
	  .item{
	      width: 100%;
	      margin-bottom: 5px;
	  }
	}
	.waterfall-left,.waterfall-right{
	    width:49%;
	}
	.waterfall-img{
	    width:100%;
	}
	.waterfall-container {
	  display: flex;
	  justify-content: space-between;
	}
	
	.waterfall-column {
	  width: 48%;
	}
	
	.waterfall-column image {
	  width: 100%;
	  margin-bottom: 10px;
	}
	.items_tu {
		width: 288rpx;
		height: 162rpx;
		background: #F5F6F7;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

	}

	textarea {
		height: 150rpx;
		padding: 40rpx;
		margin-top: 20rpx;
		background-color: #F9F9F9;
	}

	.w100t {
		padding: 30rpx 20rpx;
		border-bottom: 1rpx solid #f9f9f9;
	}

	.w100 {
		// background: #fff;
		// border-bottom: 1rpx solid #f9f9f9;
		// padding: 30rpx 20rpx;
	}

	.content {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 0;
	}

	.orange {
		margin-left: 10rpx;
	}

	.w200 {
		width: 200rpx;
	}

	.w320 {
		width: 360rpx;
	}

	.mright {
		width: 500rpx;
		flex-wrap: wrap;

		.taglist {
			height: 56rpx;
			background: #F5F6F7;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			color: #8091A4;
			font-size: 28rpx;
			padding: 0 20rpx;
		}

		.active {
			background: #0256FF;
			color: #fff;
		}
	}

	.w300 {
		width: 290rpx;
	}

	.tag {
		border: 1rpx solid #0256FF;
		color: #0256FF;
		font-size: 18rpx;
		line-height: 1.5;
		padding: 0 10rpx;
		border-radius: 5rpx;
	}

	.tab {
		margin-top: 50rpx;
		width: 100%;
		padding: 0 0rpx;

		.tabitem {
			width: 250rpx;
			height: 60rpx;
		}

		.active {
			font-size: 32rpx;
			color: #0256FF;
			background: #fff;
			border-radius: 0 60rpx 0 0;
		}

		.active_0 {
			font-size: 32rpx;
			color: #0256FF;
			background: #fff;
			border-radius: 0 60rpx 0 0;
		}

		.active_1 {
			font-size: 32rpx;
			color: #0256FF;
			background: #fff;
			border-radius: 60rpx 60rpx 0 0;
		}

		.active_2 {
			font-size: 32rpx;
			color: #0256FF;
			background: #fff;
			border-radius: 60rpx 0 0 0;
		}

		.active_3 {
			font-size: 32rpx;
			color: #0256FF;
			background: #fff;
			border-radius: 60rpx 0 0 0;
		}
	}

	.artice_list {
		padding: 20rpx 35rpx;

		.items {
			margin-bottom: 46rpx;
		}

		.a-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 8rpx;
		}

		.read {
			width: 76rpx;
		}

		.info {
			width: 500rpx;

			.title {
				width: 100%;
				margin-bottom: 5rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}

	.grb {
		padding-top: 30rpx;
		margin-bottom: 140rpx;
		background-color: #fff;
	}

	.grb-img {
		width: 200rpx;
	}

	page {
		background: #F9F9F9;
	}

	.menu {
		margin-top: 40rpx;

		.menu-item {
			width: 33.3%;
			margin: 20rpx 0;

			.menu-icon {
				width: 80rpx;
			}
		}
	}

	.banner {
		border-radius: 10rpx;
	}

	wx-swiper .wx-swiper-dot {

		background: rgba(0, 0, 0, 0.1) !important;
		border: 1rpx solid #fff;
	}

	wx-swiper .wx-swiper-dot-active {

		background: #fff !important;
	}

	// 	 .uni-swiper-dot {
	// 			// 指示点元素默认样式
	// 			width: 9rpx !important;
	// 			height: 9upx !important;
	// 			background: #C0C0C0 !important;
	// 			border: 1rpx solid #fff;
	// 		}

	// 	 .uni-swiper-dot-active {
	// 			// 指示点元素激活（当前选中）状态样式
	// 			width: 32rpx !important;
	// 			height: 8rpx !important;
	// 			background: #fff !important;
	// 			border-radius: 4rpx;
	// 		}
	.topView {
		margin-top: 0;
		margin-left: 0;
		width: 100%;
		height: 384rpx;
	}

	.list {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;

		.gonggao {
			box-sizing: border-box;
			padding: 0 16rpx;
			padding-top: 10rpx;
			width: 100%;
			height: 54px;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 10rpx 0px rgba(0, 0, 0, 0.1);
			border-radius: 0 0 8rpx 8rpx;

			text {
				width: 550rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.item {
			position: relative;
			margin-bottom: 20rpx;
			border-radius: 16rpx;
			overflow: hidden;

			.name {
				width: 100%;
				height: 100%;
				padding-left: 32rpx;
				box-sizing: border-box;
				position: absolute;
				left: 0;
				top: 0;
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(2, 86, 255, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}

			.name_1 {
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(2, 86, 255, 0.8) 0%, rgba(2, 86, 255, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}

			.name_2 {
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(14, 152, 105, 0.8) 0%, rgba(14, 152, 105, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}

			.name_3 {
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(255, 188, 2, 0.8) 0%, rgba(255, 188, 2, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}

			.name_4 {
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(255, 2, 2, 0.8) 0%, rgba(255, 2, 2, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}
		}

		.i_img {
			width: 48rpx;
			height: 48rpx;
			margin-right: 10rpx;
		}

		.i_img1 {
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}


	}


	.top {
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		padding: 20rpx 32rpx;
	}

	.search {
		width: 620rpx;
		height: 72rpx;
		background: #F9F9F9;
		border-radius: 56rpx;
		opacity: 1;
		border: 1rpx solid #E6E6E6;
		padding: 0 10rpx;
		box-sizing: border-box;

		input {
			background: none;
			border: none;
			margin-left: 10rpx;
			width: 400rpx;
		}
	}
</style>